<template>
  <div class="edit-category">
    <el-dialog title="修改分类" :visible.sync="editCategorySync" :before-close="handleCloseDialog" width="45%">
      <el-card shadow="never">
        <div class="edit-category-body">
          <el-form label-width="100px" :model="editCategoryData" ref="editCategoryForm" :rules="editCategoryRule">
            <el-form-item label="分类代码:" prop="categoryCode">
              <el-input v-model="editCategoryData.categoryCode" class="edit-category-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="分类名称:" prop="categoryName">
              <el-input v-model="editCategoryData.categoryName" class="edit-category-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="分类备注:" prop="categoryRemark">
              <el-input type="textarea" maxlength="200" show-word-limit v-model="editCategoryData.categoryRemark" class="edit-category-input" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleEditCategory">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import store from '@/store'
import { GetCategoryByIdApi, UpdateCategoryApi } from '@/request/category/category-api'

export default {
  computed:{
    listenEditCategoryId () {
      return store.state.CategoryEdit.editCategoryId
    },
    ...mapState({
      editCategorySync:state => state.CategoryEdit.editCategorySync,
      editCategoryId:state => state.CategoryEdit.editCategoryId
    })
  },
  data(){
    return{
      editCategoryData:{
        categoryCode:null,
        categoryName:null,
        categoryRemark:null,
        id:null
      },
      editCategoryRule:{
        categoryName:{required:true,message:"请输入分类名称",trigger:'blur'},
        categoryCode:{required:true,message:"请输入分类代码",trigger:'blur'}
      }
    }
  },
  methods:{
    close(){
      store.commit("CategoryEdit/changeEditCategorySync",false)
      store.commit("CategoryEdit/changeEditCategoryId",null)
    },
    handleCloseDialog () {
      this.$confirm('确定取消修改分类吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
    async init (id) {
      let res = await GetCategoryByIdApi(id);
      if (res.code === 200) {
        this.editCategoryData.categoryCode=res.data.categoryCode
        this.editCategoryData.id = res.data.id
        this.editCategoryData.categoryName = res.data.categoryName
        this.editCategoryData.categoryRemark = res.data.categoryRemark
      } else {
        this.$message("获取分类信息失败！")
      }
    },
    handleEditCategory(){
      this.$refs.editCategoryForm.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定修改该分类信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res =await UpdateCategoryApi(this.editCategoryData)
            if (res.code === 200) {
              this.$message.success('修改菜单成功！')
              this.close()
              this.$parent.handleQuery()
            }else {
              this.$message.error(res.msg)
            }
          }).catch((e) => {
            if (e === 'cancel') {
              this.$message.info('取消修改')
            } else {
              this.$message.error('未知错误！')
            }
          });
        }
      })
    }
  },watch:{
    listenEditCategoryId:{
      immediate: true,
      handler (val, oldval) {
        if (val) {
          this.init(val)
        }
      }
    }
  }

}
</script>
<style scoped lang="less">
.edit-category {
  .el-dialog {
    .el-card {
      width: 70%;
      margin: 0 auto;

      .edit-category-body {
        width: 80%;
        margin: 10px 20px;

        .edit-category-input {
          width: 240px;
        }
      }
    }

    .dialog-footer {
      margin: 0 auto;
      padding: 20px 20px;
      max-width: 200px;
    }
  }
}

/deep/ .el-dialog {
  border-radius: 10px;
}
</style>
